// 这个js文件其实就是一个模块
// 由于模块的成员必须要导出才能在外部使用，所以这里使用export导出
import { ref,computed } from 'vue'
import axios, { Axios } from 'axios'
// 1. 渲染列表数据
// ① 定义响应式数据-类型数组  ② 定义函数getList获取服务器的数据赋值给响应式对象
// ② 在页面进入后调用getList
const list = ref([])
const getList = async()=>{
    //获取服务器数据
    const res = await axios({
        url:'https://applet-base-api-t.itheima.net/bill?creator=ivan666',

    })
    list.value = res.data.data
}
//计算总价
const totalPrice = computed(()=>{
    return list.value.reduce((total,item)=>{
        return total + item.price
    },0)
})

// 1.0 将上述方法导出，vue3中导出的规范是，使用一个use开头的函数导出
export function useGetListMember() {
    return {
        list,
        getList,
        totalPrice,

    }
}

// 2. 添加数据
// 2.1 定义一个响应式对象
// 2.2 定义一个方法，请求服务器完成添加功能
// 使用use函数导出成员
const formData = ref({
    creator:'ivan666',
    name:'',
    price:0
})
const addData = async()=>{
    // 发送请求
 const res =    await axios({
        url:'https://applet-base-api-t.itheima.net/bill',
        method:'POST',
        data:formData.value,
    })
    console.log(res);
    
    // 刷新列表
    getList()   
}
export function useAddDataMember(){
    return {
        formData,
        addData
    }
}

// 3. 删除数据
const delData = async (id) =>{
    // 发送请求
    await axios({
        url:`https://applet-base-api-t.itheima.net/bill/${id}`,
        method:'DELETE',
    })
    // 刷新列表
    getList()
}
export function useDelDataMember(){
    return {
        delData
        
    }
}